<template>
  <div class="login_page">
    <h3>助贷平台登录</h3>
    <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')" label-width="200">登录</Button>
        </FormItem>
    </Form>

  </div>

</template>

<script>
  export default {
    name: 'Login',
    data(){
      return {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
                ]
            }
      }
    },
    mounted(){

    },
    computed: {

    },
    methods: {
      handleSubmit(name) {
          var that = this
          this.$refs[name].validate((valid) => {
              if (valid) {
                  //this.$Message.success('Success!');
                  this.$ajax({
                    url:'/api/user/login',
                    method:"post",
                    data:{
                      username:that.formInline.user,
                      password:that.formInline.password
                    }
                  })
                  .then(function(res){
                    if(res.data.code == 200){
                      that.$router.push({path:'/productList'})
                    }else{
                      that.$Message.error(res.data.cause)
                    }
                  })
              } else {
                  // this.$Message.error('Fail!');
                  return;
              }
          })
      }
            
    }
  }
</script>

<style lang="less" scoped>
  .login_page{
    width: 500px;height: 300px;
    margin:100px auto;background: #ccc;
    h3{
      height:50px;line-height:50px;text-align:center;
    }
    input{
      display: block;
      height:50px;line-height:40px;border: 1px solid #ccc;
      width:400px;margin:20px auto;
      outline: none;
      text-indent:10px;
    }
  }
  .ivu-form { margin:10px auto;width:330px;}
  .ivu-btn-primary{width:200px;}
  .ivu-form-item-content{text-align:center;}
</style>
